/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Animated,
    Platform
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import ButtonItem from '../components/ButtonItem';
import StorageUser from '../lib/plugins/StorageUser';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class AddList extends Component{
    constructor(props) {
        super(props);
        this.isFirst = true;
        this.state = {
            infoList:this.props.navigation.state.params.infoList,
            list:[
                    {title:'今日预约',select:false},
                    {title:'今日销量',select:false},
                    {title:'代付款',select:false},
                    {title:'待发货',select:false},
                    {title:'昨日访问量',select:false},
                    {title:'昨日成交金额',select:false},
                    {title:'账户余额',select:false},
                    {title:'出售中',select:false},
                    {title:'发起任务',select:false}
                ],
        };
        
    }
    // 渲染标签列表
    renderItem(){
        var arr = this.state.list;
        var infoList = this.state.infoList;
        var len = arr.length;
        var infoLen = infoList.length;
        if(this.isFirst){
            for(var i=0;i<infoLen;i++){
                for(var j=0;j<len;j++){
                    if(arr[j].title==infoList[i].name){
                        arr[j].select = true;
                        break;
                    }
                }
            }
            this.isFirst = false;
        }
        return(
            arr.map((item,i)=>{
                return(
                    <View key={i}>
                        {i==(len-1)?
                            <ButtonItem 
                                title={item.title} 
                                icon={item.select?'openBtn':'closeBtn'} 
                                onPress={()=>this.choseItem(i)}/>:
                            <ButtonItem 
                                style={styles.listItem}
                                title={item.title} 
                                icon={item.select?'openBtn':'closeBtn'} 
                                onPress={()=>this.choseItem(i)}/>
                        }
                        
                    </View>
                )
            })
            
        )
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'添加'}
                    leftPress={()=>this.goBack()}/>
                <ScrollView>
                    <View style={styles.listBox}>
                        {this.renderItem()}
                    </View>
                </ScrollView>   
            </View>
        )
    }
    // 列表按钮点击事件
    choseItem(i){
        var arr = this.state.list;
        var len = arr.length;
        arr[i].select = !arr[i].select;
        this.setState({
            list:arr
        })
    }
    // 返回按钮事件
    async goBack(){
        var data = [];
        var len = this.state.list.length;
        for(var i=0;i<len;i++){
            if(this.state.list[i].select){
                var obj = {};
                obj.name = this.state.list[i].title;
                obj.number = '0';
                data.push(obj);
            }
        }
        var listData = {};
        listData.infoList = data;
        await StorageUser._saveUser(listData);
        this.props.navigation.state.params.listItems(data);
        this.props.navigation.goBack();
        
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },
        }),
    }, 
    listBox:{
        marginTop:20,
        backgroundColor:'#fff',
        borderTopWidth:1,
        borderTopColor:'#E9E9EB',
        borderBottomWidth:1,
        borderBottomColor:'#E9E9EB',
        paddingLeft:10
    },
    listItem:{
        borderBottomWidth:1,
        borderBottomColor:'#E9E9EB'
    }  
});